{extend name="public/common"}

{block name="style"}
<title>{$title}</title>
<link rel="stylesheet" href="/home/css/approval/detail.css?v={$Think.config.version}">
{/block}

{block name="body"}
<div id="app" v-cloak>
    <div class="information">
        <div class="head">
            <div class="img-box">
                <img :src="detail.header" />
            </div>
            <div class="content">
                <p>{{detail.username}}</p>
                <p>{{detail.department}}</p>
            </div>
        </div>
        <div class="content">
            <ul v-if="detail.class == 1">
                <li><span>类型：</span><p>{{detail.class_text}}</p></li>
                <li><span>开始时间：</span><p>{{detail.start_time | timeToString('ymdhi')}}</p></li>
                <li><span>结束时间：</span><p>{{detail.end_time | timeToString('ymdhi')}}</p></li>
                <li><span>时长：</span><p>{{detail.duration}}</p></li>
                <li><span>假别：</span><p>{{detail.type_text}}</p></li>
                <li><span>职位代理人：</span><p>{{detail.agent?detail.agent:'无'}}</p></li>
                <li><span>审批人：</span><p>{{detail.user['1'][0].username}}</p></li>
                <li><span>备注：</span><p>{{detail.content?detail.content:'无'}}</p></li>
            </ul>
            <ul v-else-if="detail.class == 4">
                <li><span>类型：</span><p>{{detail.class_text}}</p></li>
                <li><span>申请标题：</span><p>{{detail.title}}</p></li>
                <li><span>交办部门：</span><p>{{detail.assign_department_name}}</p></li>
                <li><span>办理部门：</span><p>{{detail.handle_department_name}}</p></li>
                <li><span>交办时间：</span><p>{{detail.assign_time | timeToString('ymdhi')}}</p></li>
                <li><span>计划完成时间：</span><p>{{detail.plan_time | timeToString('ymdhi')}}</p></li>
                <li><span>交办部门负责人：</span><p>{{detail.user['1'][0].username}}</p></li>
                <li><span>办理部门负责人：</span><p>{{detail.user['3'][0].username}}</p></li>
                <li><span>审批人：</span><p>{{detail.user['2'][0].username}}</p></li>
                <li><span>备注：</span><p>{{detail.content?detail.content:'无'}}</p></li>
                <li v-if="detail.index_path.length"><span>图片：</span>
                    <div class="images">
                        <div class="img" v-for="(imgUrl,index) of detail.index_path">
                            <img :src="imgUrl" @click="loadImg(detail.preview_path[index],detail.preview_path)"/>
                        </div>
                    </div>
                </li>
            </ul>
            <ul v-else-if="detail.class == 3">
                <li><span>类型：</span><p>{{detail.class_text}}</p></li>
                <li><span>申请标题：</span><p>{{detail.title}}</p></li>
                <li><span>申请部门：</span><p>{{detail.department}}</p></li>
                <li><span>开始时间：</span><p>{{detail.apply_time | timeToString('ymdhi')}}</p></li>
                <li><span>审批人：</span><p>{{detail.user['1'][0].username}}</p></li>
                <ul v-for="item in detail.purchase_content">
                    <li><span>名称：</span><p>{{item.name}}</p></li>
                    <li><span>规格型号：</span><p>{{item.model}}</p></li>
                    <li><span>单位：</span><p>{{item.company}}</p></li>
                    <li><span>数量：</span><p>{{item.number}}</p></li>
                    <li><span>要求到货时间：</span><p>{{item.arrival_time | timeToString('ymdhi')}}</p></li>
                    <li><span>备注：</span><p>{{item.content?item.content:'无'}}</p></li>
                </ul>
            </ul>
            <ul v-else-if="detail.class == 2">
                <li><span>类型：</span><p>{{detail.class_text}}</p></li>
                <li><span>申请标题：</span><p>{{detail.title}}</p></li>
                <li><span>申请部门：</span><p>{{detail.department}}</p></li>
                <li><span>发往单位：</span><p>{{detail.to_company}}</p></li>
                <li><span>审批人：</span><p>{{detail.user['1'][0].username}}</p></li>
                <li><span>内容摘要：</span><p>{{detail.content?detail.content:'无'}}</p></li>
                <li v-if="detail.index_path.length"><span>图片：</span>
                    <div class="images">
                        <div class="img" v-for="(imgUrl,index) of detail.index_path">
                            <img :src="imgUrl" @click="loadImg(detail.preview_path[index],detail.preview_path)"/>
                        </div>
                    </div>
                </li>
            </ul>
            <ul v-if="detail.class == 5">
                <li><span>类型：</span><p>{{detail.class_text}}</p></li>
                <li><span>审批类型：</span><p>{{detail.type_text}}</p></li>
                <li><span>开始时间：</span><p>{{detail.start_time | timeToString('ymdhi')}}</p></li>
                <li><span>结束时间：</span><p>{{detail.end_time | timeToString('ymdhi')}}</p></li>
                <li><span>时长：</span><p>{{detail.duration}}</p></li>
                <li><span>审批人：</span><p>{{detail.user['1'][0].username}}</p></li>
                <li><span>加班理由：</span><p>{{detail.content?detail.content:'无'}}</p></li>
            </ul>
        </div>

    </div>
    <div :class="(!detail.reason && ((type == 3 && detail.is_approval == 1 && (detail.status == 0 || detail.status == 3)) || (type == 2 && (detail.status == 0 || detail.status == 2))))?'mb schedule':'schedule'">
        <p>审批进度：</p>
        <div>
            <div v-for="child,key in detail.user" class="rate-box">
                <div class="rate">
                    <div class="rate-bar">
                        <img src="/home/images/approval/pass.png" v-if="child[0].status == 1"/>
                        <img src="/home/images/approval/reject.png" v-else-if="child[0].status == 2"/>
                        <i v-else>{{key}}</i>
                        <span v-if="key < Object.keys(detail.user).length" :class="child[0].status != 1?'reject':''"></span>
                    </div>
                </div>
                <div class="rate-detail">
                    <div class="progress-detail">
                        <div class="detail">
                            <p>{{key < 3?key == 1?'一':'二':'三'}}级审批</p>
                        </div>
                        <div class="time" v-for="item in child">
                            <span>{{item.username}}</span>
                            <span v-if="item.status > 0">{{item.approval_time | timeToString('ymdhi')}}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div v-if="detail.status == 1 && detail.class == 4" :class="(detail.status == 1 && !detail.reason && type == 3 && ((!detail.forwarding_time && detail.user[3][0]['approval_user'] == userId) || (detail.forwarding_time && !detail.completion_time && detail.user[1][0]['approval_user'] == userId)))?'mb schedule':'schedule'">
        <p>任务进度：</p>
        <div>
            <div v-for="index in 2" class="rate-box">
                <div class="rate">
                    <div class="rate-bar">
                        <img src="/home/images/approval/pass.png" v-if="(detail.forwarding_time && index == 1) || (detail.completion_time && index == 2)"/>
<!--                        <img src="/home/images/approval/reject.png" />-->
                        <i v-else-if="(!detail.forwarding_time && index == 1) || (!detail.completion_time && index == 2)">{{index}}</i>
                        <span v-if="index < 2" :class="(!detail.forwarding_time && index == 1) || (!detail.completion_time && index == 2)?'reject':''"></span>
                    </div>
                </div>
                <div class="rate-detail">
                    <div class="progress-detail">
                        <div class="detail">
                            <p>{{index == 1?'转发':'确认'}}</p>
                        </div>
                        <div class="time">
                            <span>{{index == 1?detail.user[3][0]['username']:detail.user[1][0]['username']}}</span>
                            <span>{{(index == 1?detail.forwarding_time:detail.completion_time) | timeToString('ymdhi')}}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div :class="detail.reason?'mb schedule':'schedule'" v-if="detail.status == 2 && detail.reason">
        <p>拒绝理由：</p>
        <div class="remark">
            {{detail.reason}}
        </div>
    </div>
    <div class="status">
        <img src="/home/images/approval/passed.png" v-if="detail.status == 1"/>
        <img src="/home/images/approval/rejected.png" v-else-if="detail.status == 2"/>
    </div>
    <div class="foot" v-if="type == 3 && detail.is_approval == 1 && (detail.status == 0 || detail.status == 3)">
        <div class="cancel" @click="review(2)">不同意</div>
        <div class="confirm" @click="review(1)">同意</div>
    </div>
    <div class="foot" v-if="type == 3 && detail.status == 1 && detail.class == 4 && !detail.forwarding_time && detail.user[3][0]['approval_user'] == userId">
        <div class="forward" @click="setDepartmentStatus(1)">转发</div>
    </div>
    <div class="foot" v-if="type == 3 && detail.status == 1 && detail.class == 4 && detail.forwarding_time && !detail.completion_time && detail.user[1][0]['approval_user'] == userId">
        <div class="forward" @click="setDepartmentStatus(2)">确认</div>
    </div>
    <div class="foot" v-if="type == 2 && (detail.status == 0 || detail.status == 2) && detail.apply_user == userId">
        <div class="cancel" @click="recall">撤回</div>
        <div class="confirm" @click="edit">重新编辑</div>
    </div>
</div>
{/block}

{block name="script"}
<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script>
    console.log({$detail})
    var vw = new Vue({
        el: "#app",
        data: {
            detail: {$detail},
            type: 2,
            userId: '{$userid}'
        },
        created(){
            var hrefs = window.location.href.split('/'),
                index = hrefs.indexOf('type');
            var type = 2;
            if(index > -1) {
                window.sessionStorage.removeItem('approval_type');
                type = hrefs[index+1];
            }
            this.type = window.sessionStorage.getItem('approval_type')?window.sessionStorage.getItem('approval_type'):type;
            this.detail = this.detail ? this.detail : {user:[]};
            wx.config({
                debug: false,
                appId: {$jsSign}.appid,
                timestamp:{$jsSign}.timestamp ,
                nonceStr: {$jsSign}.noncestr,
                signature: {$jsSign}.signature,
                jsApiList: ['previewImage']
            });
        },
        methods: {
            review(status) {
                var _this = this;
                if(status == 2) {
                    _this.$messagebox.prompt('请输入拒绝原因（选填）').then(function (res) {
                        _this.$indicator.open({
                            text: '正在提交中',
                            spinnerType: 'triple-bounce'
                        });
                        _this.$http.post("{:Url('Approval/detail')}", {
                            'id': _this.detail.id,
                            'class': _this.detail.class,
                            'status': status,
                            'total_level': _this.detail.total_level,
                            'reason': res.value
                        }, {emulateJSON: true}).then(function (res) {
                            console.log(res.data)
                            var data = res.data;
                            if (data.code == 1) {
                                _this.$indicator.close();
                                _this.$toast({
                                    message: "提交成功",
                                    iconClass: 'icon',
                                    duration: 1500
                                });
                                _this.detail.is_approval = 0;
                                for(var i in _this.detail.user) {
                                    if(_this.detail.user[i][0].status == 0) {
                                        _this.detail.status = status;
                                        _this.detail.reason = res.value;
                                        _this.detail.user[i][0].status = status;
                                        _this.detail.user[i][0].approval_time = new Date().getTime() / 1000;
                                        console.log(_this.detail.user[i][0].status);
                                        return false;
                                    }
                                }
                            } else {
                                _this.$indicator.close();
                                _this.$toast({
                                    message: "提交失败，请重试！",
                                    duration: 1500
                                });
                            }
                        }, function (res) {
                            _this.$indicator.close();
                            _this.$toast({
                                message: "提交失败，请重试！",
                                duration: 1500
                            });
                        });
                    });
                } else {
                    _this.$messagebox.confirm('是否确认提交','在线审批').then(function () {
                        _this.$indicator.open({
                            text: '正在提交中',
                            spinnerType: 'triple-bounce'
                        });
                        _this.$http.post("{:Url('Approval/detail')}", {
                            'id': _this.detail.id,
                            'class': _this.detail.class,
                            'status': status,
                            'total_level': _this.detail.total_level
                        }, {emulateJSON: true}).then(function (res) {
                            console.log(res.data)
                            var data = res.data;
                            if (data.code == 1) {
                                _this.$indicator.close();
                                _this.$toast({
                                    message: "提交成功",
                                    iconClass: 'icon',
                                    duration: 1500
                                });
                                _this.detail.is_approval = 0;
                                for(var i in _this.detail.user) {
                                    if(_this.detail.user[i][0].status == 0) {
                                        if(i == Object.keys(_this.detail.user).length) {
                                            _this.detail.status = status;
                                        }
                                        _this.detail.user[i][0].status = status;
                                        _this.detail.user[i][0].approval_time = new Date().getTime() / 1000;
                                        console.log(_this.detail.user[i][0].status);
                                        return false;
                                    }
                                }
                            } else {
                                _this.$indicator.close();
                                _this.$toast({
                                    message: "提交失败，请重试！",
                                    duration: 1500
                                });
                            }
                        }, function (res) {
                            _this.$indicator.close();
                            _this.$toast({
                                message: "提交失败，请重试！",
                                duration: 1500
                            });
                        });
                    });
                }
            },
            recall() {
                var _this = this;
                _this.$messagebox.confirm('是否确认撤回','在线审批').then(function () {
                    _this.$indicator.open({
                        text: '正在提交中',
                        spinnerType: 'triple-bounce'
                    });
                    _this.$http.post("{:Url('Approval/del')}", {
                        'id': _this.detail.id,
                        'class': _this.detail.class
                    }, {emulateJSON: true}).then(function (res) {
                        console.log(res.data)
                        var data = res.data;
                        if (data.code == 1) {
                            _this.$indicator.close();
                            _this.$toast({
                                message: "撤回成功",
                                iconClass: 'icon',
                                duration: 1500
                            });
                            window.history.go(-1);
                        } else {
                            _this.$indicator.close();
                            _this.$toast({
                                message: "撤回失败，请重试！",
                                duration: 1500
                            });
                        }
                    }, function (res) {
                        _this.$indicator.close();
                        _this.$toast({
                            message: "撤回失败，请重试！",
                            duration: 1500
                        });
                    });
                });

            },
            setDepartmentStatus(type) {
                var _this = this;
                var tipTitle = type==1?'是否转发':'是否确认';
                _this.$messagebox.confirm(tipTitle,'在线审批').then(function () {
                    _this.$indicator.open({
                        text: '正在操作中',
                        spinnerType: 'triple-bounce'
                    });
                    _this.$http.post("{:Url('Approval/setDepartmentStatus')}", {
                        'id': _this.detail.id,
                        'type': type
                    }, {emulateJSON: true}).then(function (res) {
                        console.log(res.data)
                        var data = res.data;
                        if (data.code == 1) {
                            _this.$indicator.close();
                            _this.$toast({
                                message: "操作成功",
                                iconClass: 'icon',
                                duration: 1500
                            });
                            var time = new Date().getTime() / 1000;
                            if(type == 1) {
                                _this.detail.forwarding_time = time;
                            }else{
                                _this.detail.completion_time = time;
                            }
                        } else {
                            _this.$indicator.close();
                            _this.$toast({
                                message: "操作失败，请重试！",
                                duration: 1500
                            });
                        }
                    }, function (res) {
                        _this.$indicator.close();
                        _this.$toast({
                            message: "操作失败，请重试！",
                            duration: 1500
                        });
                    });
                });
            },
            edit() {
                var array = ['dayoff','officialseal','purchase','department','overtime'];
                window.location.href = '/home/approval/'+array[this.detail.class-1]+'/id/'+this.detail.id+'.html';
            },
            //            微信jssdk - 图片预览
            loadImg(src, imglist) {
                var urls = [];
                var current = window.location.protocol + '//' + window.location.host + src;
                for (var i in imglist) {
                    urls[i] = window.location.protocol + '//' + window.location.host + imglist[i];
                }
                wx.previewImage({
                    current: current,
                    urls: urls
                });
            }
        }
    })
</script>
{/block}
